<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <div slot="header">
        <span>个人中心</span>
      </div>
      <div class="profile-info">
        <el-avatar :size="80" :src="user.avatar || defaultAvatar" />
        <div class="profile-fields">
          <el-form :model="user" label-width="80px" ref="profileForm">
            <el-form-item label="用户名">
              <el-input v-model="user.username" disabled />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="user.nickname" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="user.roleName" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="profile-actions">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-change="handleAvatarChange"
          accept="image/*"
        >
          <el-button>更换头像</el-button>
        </el-upload>
        <el-button type="primary" @click="saveProfile">保存信息</el-button>
        <el-button @click="showPwdDialog = true">修改密码</el-button>
      </div>
    </el-card>
    <el-dialog :visible.sync="showPwdDialog" title="修改密码" width="400px">
      <el-form :model="pwdForm" :rules="pwdRules" ref="pwdFormRef" label-width="80px">
        <el-form-item label="原密码" prop="oldPwd">
          <el-input v-model="pwdForm.oldPwd" type="password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="pwdForm.newPwd" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input v-model="pwdForm.confirmPwd" type="password" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showPwdDialog = false">取消</el-button>
        <el-button type="primary" @click="changePassword">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const defaultAvatar = 'https://cdn.jsdelivr.net/gh/baimingxuan/media-assets/avatar-default.png'

export default {
  data() {
    return {
      user: {
        username: '',
        nickname: '',
        role: '',
        roleName: '',
        avatar: ''
      },
      showPwdDialog: false,
      pwdForm: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      },
      pwdRules: {
        oldPwd: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码至少6位', trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value !== this.pwdForm.newPwd) {
              callback(new Error('两次输入密码不一致'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ]
      },
      defaultAvatar
    }
  },
  created() {
    const user = JSON.parse(localStorage.getItem('adminUser') || '{}')
    this.user = {
      ...user,
      nickname: user.nickname || '',
      avatar: user.avatar || ''
    }
  },
  methods: {
    saveProfile() {
      localStorage.setItem('adminUser', JSON.stringify(this.user))
      this.$message.success('保存成功')
    },
    beforeAvatarUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isImage) {
        this.$message.error('只能上传图片文件!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB!')
      }
      return isImage && isLt2M
    },
    handleAvatarChange(file) {
      const reader = new FileReader()
      reader.onload = e => {
        this.user.avatar = e.target.result
      }
      reader.readAsDataURL(file.raw)
    },
    changePassword() {
      this.$refs.pwdFormRef.validate(valid => {
        if (!valid) return
        // 简单本地校验，实际应调用后端
        const user = JSON.parse(localStorage.getItem('adminUser') || '{}')
        if (this.pwdForm.oldPwd !== user.password) {
          this.$message.error('原密码错误')
          return
        }
        if (this.pwdForm.newPwd === this.pwdForm.oldPwd) {
          this.$message.error('新密码不能与原密码相同')
          return
        }
        user.password = this.pwdForm.newPwd
        localStorage.setItem('adminUser', JSON.stringify(user))
        this.$message.success('密码修改成功，请重新登录')
        this.showPwdDialog = false
        setTimeout(() => {
          localStorage.removeItem('isLogin')
          this.$router.replace('/login')
        }, 1000)
      })
    }
  }
}
</script>

<style scoped>
.profile-container {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}
.profile-card {
  width: 500px;
}
.profile-info {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.profile-fields {
  flex: 1;
  margin-left: 32px;
}
.profile-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}
.avatar-uploader .el-upload {
  border: none;
  background: none;
  padding: 0;
}
</style> 